<template>
  <div class="search-criteria flex-between">
    <n-flex align="center">
      <slot name="prefix" />
      <n-input
        size="small"
        class="criteria-input"
        placeholder="关键字搜索"
        v-model:value="name"
      />
    </n-flex>
    <n-flex align="center">
      <n-icon
        :component="ListOutline"
        size="17"
        class="cursor-pointer"
      />
      <n-icon
        :component="AppsOutline"
        class="cursor-pointer"
      />
      <n-icon
        :component="ReloadOutline"
        class="cursor-pointer"
        @click="() => $emit('search')"
      />
    </n-flex>
  </div>
</template>

<script lang="ts" setup>
  import { ReloadOutline, ListOutline, AppsOutline } from '@vicons/ionicons5'
  const emits = defineEmits<{
    (e: 'search'): void
  }>()

  const name = defineModel('name')
</script>

<style scoped lang="scss">
  .search-criteria {
    padding: 12px 16px;
    background-color: var(--n-color);
    .criteria-input {
      width: 220px;
    }
  }
</style>
